const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 每次打包清除之前的打包内容
const htmlWebpackPlugin = require("html-webpack-plugin"); // 生成HTML文件
const { VueLoaderPlugin } = require('vue-loader') // 处理.vue文件的loader

module.exports = {
  entry: path.join(__dirname, "./src/main.js"), //入口文件
  output: {
    path: path.join(__dirname, './dist/js'), // 指定输出目录
    filename: "[name].bundle.js", // 指定输出文件
  },
  stats: {
    // One of the two if I remember right
    entrypoints: false,
    children: false
  },
  module: {
    rules: [
      // 匹配js文件
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: { // 这里的options替换成query也是可以打包的。
            // 需要的是presets内部插件集合，才能真的转换，加载器可以用来编译转换代码
            presets: ['@babel/preset-env']
          }
        },
        exclude: /node_modules/, // 除外目录
      },
      // 匹配图片文件
      {
        test: /\.(png|jpg|gif|ttf|ico|jpeg)$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 10 * 1024, // 大于这个size的文件交给file-loader
            esModule: false
          }
        }
      },
      // 处理.less文件
      {
        test: /\.less/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      // 处理.css文件
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 匹配HTML
      {
        test: /.html$/,
        use: 'html-loader'
      },
      // 匹配.vue
      {
        test: /\.vue$/,
        use: 'vue-loader'
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(), // 清空dist文件夹

    // 自动生成 html文件，避免硬编码和手动修改路径
    new htmlWebpackPlugin({
      title: 'shang---title',
      filename: 'index.html',
      favicon: './public/favicon.ico',   //------favicon的路径
      template: path.join(__dirname, './public/index.html')
    }),

    new VueLoaderPlugin()
  ]
}